<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>社团所有活动</title>
    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/vue.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div id="app">
    <div class="content" v-for="activity in paginatedActivityList" :key="activity.id">
        <div class="activity-item">
            <img :src="'activityImg/'+activity.activityHead" alt="活动图片">
            <div class="activity-info">
                <h5 class="card-title"><strong>{{ activity.activityName }}</strong></h5>
                <p><strong>举办社团:</strong> {{ clubInfoMap[activity.clubId]?.clubName || '未知' }}</p>
                <p><strong>活动地点:</strong> {{ activity.activityLocation }}</p>
                <p><strong>活动时间:</strong> <font size="2px"> {{ activity.startTime }} - {{ activity.endTime }}</font></p>
                <p class="p"><strong>活动状态:</strong> {{ getActivityStatus(activity) }}</p>
                <button class="btn btn-primary" @click="goToActivityDetail(activity.activityId)" v-if="getActivityStatus(activity) === '未开始'">活动详情</button>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
    <ul class="pagination">
        <li :class="{ disabled: currentPage === 1 }">
            <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">上一页</button>
        </li>
        <li v-for="page in totalPages" :key="page" :class="{ active: currentPage === page }">
            <button @click="changePage(page)">{{ page }}</button>
        </li>
        <li :class="{ disabled: currentPage === totalPages }">
            <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">下一页</button>
        </li>
    </ul>
</div>
<style>
    #app {
        width: 1100px;
        margin: auto;
    }

    .content {
        width: 24%;
        float: left;
        box-sizing: border-box;
        padding: 10px;
        margin-bottom: 20px;
    }

    .activity-item {
        border: 1px solid #ccc;
        border-radius: 5px;
        overflow: hidden;
    }

    .activity-item img {
        width: 100%;
        height: auto;
    }

    .activity-info {
        padding: 10px;
    }

    .pagination {
        display: flex;
        justify-content: center;
        margin-top: 20px;
        list-style: none;
        padding: 0;
    }

    .pagination li {
        margin: 0 5px;
    }

    .pagination button {
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;
        cursor: pointer;
    }

    .pagination button.active {
        background-color: #007bff;
        color: white;
    }

    .pagination button:disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }

    .search-filter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .search-filter label {
        margin-right: 10px;
    }

    .search-filter input {
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;
        cursor: pointer;
        margin-right: 10px;
    }

    .search-filter .status-filter {
        display: flex;
        align-items: center;
    }

    .status-filter label {
        margin-right: 20px;
    }

    .status-filter select {
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;
        cursor: pointer;
        margin-right: 50px;
    }

    .btn {
        padding: 5px 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #f9f9f9;
        cursor: pointer;
        color: black;
    }

    .btn:hover {
        background-color: #007bff;
    }
    .p {
        padding-right: 10px; /* 段落内部右边距 */
    }
</style>
<script>
    $(function() {
        const clubId = new URLSearchParams(window.location.search).get('clubId');
        $.ajax({
            url: `activity/club/${clubId}`,
            type: "get",
            dataType: "json",
            success: function(data) {
                new Vue({
                    el: "#app",
                    data: {
                        activityList: data,
                        clubInfoMap: {}, // 社团信息映射
                        currentPage: 1,
                        itemsPerPage: 8,
                        currentTime: new Date().toISOString(),
                    },
                    computed: {
                        // 计算总页数
                        totalPages() {
                            return Math.ceil(this.activityList.length / this.itemsPerPage);
                        },
                        // 分页
                        paginatedActivityList() {
                            const start = (this.currentPage - 1) * this.itemsPerPage;
                            const end = start + this.itemsPerPage;
                            return this.activityList.slice(start, end);
                        }
                    },
                    methods: {
                        // 切换页码
                        changePage(page) {
                            if (page < 1 || page > this.totalPages) {
                                return;
                            }
                            this.currentPage = page;
                        },
                        // 获取活动状态
                        getActivityStatus(activity) {
                            const now = new Date(this.currentTime);
                            const startTime = new Date(activity.startTime);
                            const endTime = new Date(activity.endTime);
                            const oneDay = 24 * 60 * 60 * 1000;//一天

                            if (now < startTime - oneDay) {
                                return "未开始";
                            } else if(now >=startTime - oneDay && now < startTime){
                                return "准备中";
                            } else if (now >= startTime && now <= endTime) {
                                return "进行中";
                            } else {
                                return "已结束";
                            }
                        },
                        // 获取社团信息
                        fetchClubInfo(clubId) {
                            if (this.clubInfoMap[clubId]) {
                                return;
                            }
                            $.ajax({
                                url: `activity/${clubId}`,
                                type: "get",
                                dataType: "json",
                                success: (clubInfo) => {
                                    this.$set(this.clubInfoMap, clubId, clubInfo);
                                }
                            });
                        },
                        //
                        goToActivityDetail(activityId) {
                            // 社团id和活动id
                            window.location.href = `activityinfo.html?activityId=${activityId}`;

                        }
                    },
                    // 挂载后获取社团信息
                    mounted() {
                        this.activityList.forEach(activity => {
                            this.fetchClubInfo(activity.clubId);
                        });
                    }
                });
            }
        });
    });
</script>
</body>
</html>
